<%--
Created by IntelliJ IDEA.
User: cic
Date: 2023/10/21
Time: 23:39
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>yeeZiWWWu.com-全球超级购物网站</title>
  <style type="text/css">
    body {
      margin: 0;
    }


    /*滚动条*/
    .rigth-content-bottom{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      margin: 0;
      margin-top: 0;
      overflow: scroll;
      height: 1000px;
    }

    /*上框架——包含logo和导航*/
    .topArea{
      float:left;/*居于页面左边*/
      position: fixed;top:0px;left: 20px;
      background-color: whitesmoke ;
      opacity:0.8;
      width:94%;/*宽度*/
      height: 155px;/*高度*/
    }


    /* 头部——图标 */
    .header_icon {
      float:left;/*居于页面左边*/
      width:200px;/*宽度*/
      height: 135px;/*高度*/
      text-align: center;/*文本居中对齐*/
      background-image: url("椰子.png"); /*设置盒子背景*/    /*当图片属于网页内容时，必须使用img元素*/ /*当图片仅用于美化页面时，必须使用背景图*/
      background-repeat: no-repeat;
      background-size: 100%; /* 调整背景图片大小以适应页面 */
    }


    /*!*头部——功能菜单主按钮式导航*!*/
    *{padding: 20px;margin: 10px;font-size: 30px} /*padding导航宽度//margin导航下滑位置//front-size标签字体大小*/
    nav{ width:1005px;height: 30px;background-color: whitesmoke ;opacity:0.9;position: fixed; top: 25px; left: 330px}/*此处的position是修改底框*/
    .main{width: 88%;margin:0;height: 30px}
    nav a{
      display: inline-block;
      font-family: '黑体';/*功能按钮字体*/
      color: indigo;/*功能按钮字体颜色*/
      text-decoration: none;
      width: 200px;/*每个标签的宽度*/
      height: 100%;
      /*text-align: center;!*标签文字居中*!*/
      line-height: 1px;/*字体位置*/
    }
    nav a:hover{/*鼠标指针移动到按钮时变色*/
      background: gold;
    }


    /*———— 搜索条 ———— */
    /*搜索底框*/
    .search_box {
      overflow: hidden;
      width:35%;/*宽度*/
      height: 10px;/*高度*/
      text-align: left;/*文本靠左对齐*/
      /*border:5px black solid;!*盒子边框颜色*!*/
      background-color: whitesmoke;
    }
    /*搜索文本条*/
    input{
      position: fixed;top: 100px;left: 400px;/*文本条位置*/
      font-size: 20px;/*文本条里面的字体大小*/
      width: 410px;/*文本条宽度*/
      border: 1px solid #e2e2e2;
      height: 50px;
      float: left;
      background-repeat: no-repeat;
      background-size: 25px;
      background-position: 5px center;
      pading:0 0 0 4px;
    }
    /*搜索键*/
    #search{
      position: fixed;top: 100px;right: 650px;
      width: 5%;
      height: 10px;
      float: right;
      background: black;
      color: white;
      text-align: center;
      line-height: 35px;
      cursor: pointer;
    }
    /* 搜索图标 */
    .search_icon {
      float: right;/*居于页面右边*/
      padding: 23px;/*盒子大小*/
      border-radius: 50%; /*盒子边框圆角设置*/
      background-image: url("搜索图标.jpg"); /*设置盒子背景*/
      background-repeat: no-repeat;
      background-size: 100%; /* 调整背景图片大小以适应页面 */
    }


    /*轮播器———— 广告展示区 */
    #ad{
      position: fixed;top:205px; left: 330px;
      width:74%;/*宽度**/
      height: 600px;/*高度*/
      background-image:url("广告.jpg");
      background-size: cover; /* 调整背景图片大小以适应页面 */

    }
    #leftbtn,#rightbtn{
      position: absolute;
      top: calc(44% - 20px);
      color: #fff;
      font-size: 40px;
      cursor: pointer;
    }
    #leftbtn{left: 10px;}
    #rightbtn{right: 10px;}


    /*左侧商品一级菜单导航可视化*/
    .merchandiseMenu{
      opacity: 0.9;/*底框颜色透明度*/
      position: fixed;top:350px; left: 20px;/*底框在页面的位置*/
      float: left;/*居于页面右边*/
      width:15%;/*宽度*/
      height: 470px;/*长度*/
      border-radius: 10%; /*边框圆角设置*/
      background-color: whitesmoke ;/*底框背景*/
    }
    .contentMerchandise>ul{
      position: fixed;top: 350px;/*设置文本垂直面位置*/ left: 0;/*设置水平方向上的位置*/
      font-size: 500px;
      list-style-type: none;
      line-height :0px;

    }
    .contentMerchandise>ul>li{
      height: 10px;/*高度*/
    }
    .contentMerchandise>ul>li:hover{ /*鼠标触动框*/
      margin-top: 30px;
      width: 30px;
      height: 0px;
      opacity: 0.1;/*透明度*/
      border-radius: 10%; /*边框圆角设置*/
      background: gainsboro;/*鼠标移动到按钮的颜色*/
    }
    .contentMerchandise a{
      position: fixed;
      left: 15px;/*设置水平方向上的位置*/
      text-align: left;/*文本靠左对齐*/
      display: block;/*按钮的分布——垂直*/
      width: 200px;/*标签的宽度*/
      text-decoration: none;
      font-size: 20px;/*字体大小*/
      color: indigo;/*字体颜色*/
    }
    .contentMerchandise span{
      font-weight: normal;/*字体粗细*/
    }

    /*!*左侧商品二级菜单导航可视化*!*/
    /*.contentMerchandise .content1{*/
    /*    width: 300px;*/
    /*    background-color: yellow;*/
    /*    left: 50px;*/
    /*    top: 0;*/
    /*    bottom: 0;*/
    /*    display: none;*/
    /*    border: 1px solid black;!*二级显示菜单边框*!*/
    /*}*/
    /*.contentMerchandise ol{*/
    /*    background: #fff;*/
    /*    list-style-type: none;*/
    /*    font-size: 12px;*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*    !*设置子元素在父容器由上至下排列*!*/
    /*    width: auto;*/
    /*    heigh:400px;*/
    /*    flex-wrap: wrap;*/
    /*}*/
    /*.contentMerchandise ul>li:hover .content1{*/
    /*    display: block;*/
    /*}*/
    /*.contentMerchandise ol>li{*/
    /*    background: white;*/
    /*    height: 70px;*/
    /*    width: 200px;*/
    /*    line-height: 70px;*/
    /*    flex-grow: 0;*/
    /*    flex-shrink: 0;*/
    /*}*/
    /*.contentMerchandise ol span{*/
    /*    font-size: 10px;*/
    /*    color: #000;*/
    /*}*/

    /* 欢迎界面--头部——图标 */
    .header_user_icon {
      float: right;/*居于页面右边*/
      padding: 45px;/*盒子大小*/
      border-radius: 50%; /*盒子边框圆角设置*/
      background-image: url("椰子商家.jpeg"); /*设置盒子背景*/
      background-size: cover; /* 调整背景图片大小以适应页面 */
    }
    /* 欢迎框 */
    .header_user {
      position:fixed; top: 205px;left: 20px;
      opacity:0.9;
      float: left;/*居于页面右边*/
      width:15%;/*宽度*/
      height: 100px;/*高度*/
      border-radius: 10%; /*盒子边框圆角设置*/
      background-color: whitesmoke ;
      /*background-color: rgba(255, 255, 255, 0.8); !* 设置表单的背景颜色和透明度 *!*/
      background-size: cover; /* 调整背景图片大小以适应页面 */
    }
    /*登录*/
    .loginUser{
      position:fixed; top: 213px;left: 130px;
      width:2%;/*宽度*/
      height: 5px;/*高度*/
      border-radius: 10%; /*盒子边框圆角设置*/
      background-color: lightgray;
    }
    .loginMerchant{
      position:fixed; top: 213px;left: 210px;
      width:2.5%;/*宽度*/
      height: 5px;/*高度*/
      border-radius: 10%; /*盒子边框圆角设置*/
      background-color: lightblue;
    }
    /*注册*/
    .sign_in{
      position:fixed; top: 263px;left: 140px;
      width:6%;/*宽度*/
      height: 2px;/*高度*/
      border-radius: 10%; /*盒子边框圆角设置*/
      background-color: lightgray;
    }

    /*主页面背景*/
    body {
      background-image: url("网站页面.png"); /* 设置背景图片 */
      /*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
      /* 背景图片全屏 */
      background-repeat:no-repeat;
      background-attachment: fixed;
      /*background-size:cover;*/
      background-size: 100% 100%;
    }
  </style>
</head>


<body>

<!--头部领域--><div class="topArea"></div>



<!--图标可视化--><div class="header_icon" style="position:fixed; top: 20px; left: 60px"></div>


<!--头部——功能菜单主按钮式导航-->
<nav>
  <div class="main"style="opacity:0.8;position:fixed; top: 5px; left: 310px"><!--此处的position是修改触动框-->
    <a href="#">首页</a>
    <a href="#">买家中心</a>
    <!--        <div class="content1">-->
    <!--            <ol>-->
    <!--                <li><a href="#">上架商品 </a><span></span></li>-->
    <!--                <li><a href="#">修改商品信息</a><span></span></li>-->
    <!--                <li><a href="#">查看订单</a><span></span></li>-->
    <!--            </ol>-->
    <!--        </div>-->
    <a href="#">卖家中心</a>
    <a href="serviceSite.jsp">客服中心</a>
  </div>
</nav>


<!--搜索条可视化-->
<div class="search_box" style="opacity:0.8;position:fixed; top: 100px; left: 330px" >
  <!--嵌入搜索头像-->
  <div class="search_icon" style="position: fixed;top: 105px;left: 335px;"></div>
  <input type="search" name ="search" placeholder="请输入要搜索的商品类型">
  <div id="search" >
    <a href="#" style="font-size:20px;position: fixed;top: 88px;right: 670px;" >搜索</a>
  </div>
</div>


<!--欢迎商家可视化--><!--opacity:0.7;设置透明度-->
<div class="header_user" >
  <div class="header_user_icon" style="position:fixed; top: 210px;left: 35px"></div>
  <p style="font-family: '华文楷体';font-size:20px;position:fixed; top: 290px; left: 50px">Hi~这里是yeeZiWu</p>

  <a href="UserLogin.jsp"><div class="loginUser">  <p style="font-size:15px;position: fixed;top: 205px;left:  115px;" >用户login</p>  </div></a>
  <a href="ManageLogin.jsp"><div class="loginMerchant">   <p style="font-size:15px;position: fixed;top: 205px;left:  195px;" >商家login</p>  </div></a>

  <div class="sign_in">   <a href="webSite_entry.jsp" style="font-size:20px;position: fixed;top: 251px;left: 140px;" >注册 signin</a>  </div>
</div>

<!--左侧商品一级菜单导航-->
<div class="merchandiseMenu">
  <div class="contentMerchandise">
    <p style="font-weight:bold;font-size: 25px;color: black;position: fixed;top: 350px;left: 20px">商品分类区</p>
    <ul>
      <li><a href="#">智能家电 数码产品</a><span></span>
        <!--                <div class="content1">-->
        <!--                    <ol>-->
        <!--                        <li><a href="#">电视 冰箱 洗碗机 扫地机 </a><span></span></li>-->
        <!--                        <li><a href="#">相机 无人机 蓝牙音箱</a><span></span></li>-->
        <!--                    </ol>-->
        <!--                </div>-->
      </li>
      <li><a href="#">服装配饰 包包鞋子</a><span></span></li>
      <li><a href="#">食品酒水 蔬菜水果</a><span></span></li>
      <li><a href="#">图书 文具</a><span></span></li>
      <li><a href="#">电脑 办公</a><span></span></li>
      <li><a href="#">清洁 日用</a><span></span></li>
      <li><a href="#">美妆 日化</a><span></span></li>
    </ul>
  </div>
</div>

<!--轮播图：主商品可视化-->
<div id="ad">
  <div id="leftbtn">&lt;</div>
  <div id="rightbtn">&gt;</div>
</div>
<script>
  //使用数组定义图片路径和图片描述
  var imgsURL=['广告.jpg','广告1.jpg','广告2.jpg','商品展示.png'];
  //DOM操作，获取HTML组件
  var arrowleft=document.getElementById("leftbtn");
  var arrowRight=document.getElementById("rightbtn");
  //为元素添加事件监听器
  arrowleft.addEventListener("click",preMove);
  arrowRight.addEventListener("click",nextMove);
  //定义全局变量，表示当前使用的照片为索引
  var index=0;
  //左箭头单击函数
  function preMove(){
    index--;
    if (index<0) index=3;
    //使用数组索引改变轮播盒子的背景图片路劲
    document.getElementById('ad').style.backgroundImage='url('+imgsURL[index]+')';
  }
  //右箭头单击函数
  function nextMove(){

    index++;
    if(index>3) index=0;
    document.getElementById('ad').style.backgroundImage='url('+imgsURL[index]+')';
  }
  //自动放映
  setInterval(nextMove,1800);//每隔1500毫秒调用一次nextMove函数
</script>
</body>
</html>